[React Native] 基本を学ぶ – Styleでコンポーネントの見た目をカスタマイズする

はじめに

React Native は、Facebook社が開発・公開しているネイティブアプリのクロスプラットフォーム開発フレームワークです。言語としてJavaScriptを使用し、React.jsを触ったことがある人であれば気軽にモバイルアプリ開発を始められます。

この記事では、React Nativeの基本である Style について学びます。

Styleとは

create-react-native-appで生成されたソースコードのうち、まだ説明していないものとして Style があります。以下のような App クラスの下部にあるコードです。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
 
export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Hello!</Text>
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

パッと見て分かるように、Styleはその名の通りコンポーネントのスタイル（見た目）を管理する機能です。文字だったら色や大きさ、またはレイアウト（各コンポーネントをどこに配置するのか）などをカスタマイズするときに使用します。ReactではCSSで記述する部分ですが、React NativeではCSSによく似た機能群を用いて、まるでCSSを書いているかのようにスタイリングできます。

Styleを使う

Styleを使ってみましょう。なお、下記の記事で環境構築およびサンプルプロジェクトの作成は済んでいる前提で進めています。

【お試し10分】React Nativeことはじめ！サンプルアプリをサクッと動かす

Styleを適用する2つの方法

Styleをコンポーネントに適用するには2つの方法があります。

• インラインで記述する方法
• StyleSheetで定義して、使い回す方法

対象のコンポーネントに1回だけ適用する場合は前者、複数のコンポーネントに同じスタイルを適用する場合は後者になります。

テキストの色やサイズを変更する例を参考に、書き方を見ていきましょう。

インラインで記述する

インラインで記述する場合は style の中にオブジェクトを直接指定します。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
 
export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={{ color: '#ff0000' }}>Hello!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

ここでは Text に color を設定しています。

StyleSheetで定義して、使い回す

Styleを使い回す場合は冒頭で紹介したコード例のように StyleSheet.create を使って記述します。以下の例では red green bigBlue という3つのスタイルを新しく定義しています。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.red}>Hello!</Text>
        <Text style={styles.green}>Hello!</Text>
        <Text style={styles.bigBlue}>Hello!</Text>
        <Text style={[styles.red, styles.bigBlue]}>Hello!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  red: {
    color: '#ff0000',
  },
  green: {
    color: '#00ff00',
  },
  bigBlue: {
    color:  '#0000ff',
    fontSize: 30
  },
});

4行目の Text は style に配列を指定しています。こうすることで、複数のスタイルをマージして適用できます。同じプロパティを指定している場合は、あと勝ち（配列順に適用）になります。

まとめ

CSSを知っている人であれば、キャメルケースに置き換えて記述していけば良いだけなので、非常に分かりやすいかと思います。

基本的には使い回した方が、管理も楽になりますし、アプリ側の処理も効率的になるのでオススメです。

参考

本記事に執筆にあたり、次の記事を参考にしました。

• Style · React Native
• StyleSheet · React Native